<link type="text/css" href="/admins/js/pagerView/pager-view.css" rel="stylesheet" />
<link type="text/css" href="/admins/js/jquery/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/admins/js/jquery/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="/admins/js/jquery/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="/admins/js/pagerView/pager-view.js"></script>
<script type="text/javascript">
$(function(){
	$.datepicker.setDefaults( $.datepicker.regional[ "zh-CN" ] );
	$( "#del-button").button().click( function () {
		if (confirm( "你真的要删除选中的项吗？" )) {
			idList = "";
			sp = "";
			$( ".checkbox-del" ).each(function(){
				if ($(this).attr("checked") == "checked") {
					idList += sp + $(this).val();
					if (sp == "") sp = ",";
				}
			});
			$.ajax({
				type: "POST",
				url: "/order/transport-del",
				dataType: "json",
				data:"idList="+idList,
				success: function(data) {
					var result=eval(data);
					if (result == true) {
						$( "#queryButton").click();
						alert( "删除成功！" );
					} else {
						alert( "删除失败！" );
					}
				}
			});
		}
	});
    $( "#queryButton").button().click( function () {
		$("#starttime2").val($("#starttime").val());$("#endtime2").val($("#endtime").val());
		$("#productName2").val($("#productName").val());$("#username2").val($("#username").val());
		$("#state2").val($("#state").val());
	    $.ajax({
			type: "POST",
			url: "/order/transport-query",
			dataType: "json",
			data:"starttime="+$("#starttime").val()+"&endtime="+$("#endtime").val()+"&productName="+$("#productName").val()+"&username="+$("#username").val()+"&state="+$("#state").val()+"&pagesize="+pager.size,
			success: function(data) {
				var items=eval(data.items);
				bindDataTable(items)
				pager.itemCount = data.count;
				pager.index = 1
				pager.render();
			}
		});

		return false; 
	});
	$( "#starttime" ).datepicker();
	$( "#endtime" ).datepicker();
	$( "#opDate" ).datepicker();
	var pager = new PagerView('pager');
	pager.size = 15; // 每页显示15条记录
	pager.maxButtons = 10;
	pager.itemCount = 0;
	pager.onclick = function(index) {
		$.ajax({
			type: "POST",
			url: "/order/transport-pager",
			dataType: "json",
			data:"starttime="+$("#starttime2").val()+"&endtime="+$("#endtime2").val()+"&productName="+$("#productName2").val()+"&username="+$("#username2").val()+"&state="+$("#state2").val()+"&pagesize="+pager.size+"&pageindex="+index,
			success: function(data) {
				var items=eval(data);
				bindDataTable(items)
			}
		});
		
	};
	pager.render();

	$( "#queryButton").click();
});
function bindDataTable(items) {
	$(".datatable tbody").empty();
	$.each(items, function(k)
	{
		$(".datatable tbody").append("<tr><td><input type=\"checkbox\" value=\""+items[k]['id']+"\" class=\"checkbox-del\" /></td><td>"+items[k]['id']+"</td><td>"+items[k]['username']+"</td><td>"+items[k]['billNo']+"</td><td>"+items[k]['billNo']+"</td><td>"+items[k]['consignee']+"/"+items[k]['conTel']+"/"+items[k]['conPostCode']+"</td><td>"+items[k]['shipFee']+"</td><td>"+items[k]['serviceFee']+"</td><td>"+items[k]['discountFee']+"</td><td>"+items[k]['shipMoney']+"</td><td>"+items[k]['dateUserConfrim']+"</td><td>"+items[k]['status']+"</td><td><img src=\"/admins/images/edit.gif\" id=\""+items[k]['id']+"\" class=\"edit-operation\"/>&nbsp;<img src=\"/admins/images/magnifier.png\" id=\""+items[k]['logistics']+"\" class=\"magnifier-operation\"/></td></tr>");
	});
	$( ".edit-operation").click( function () {
		showDialog(this.id);
	});
	$( ".magnifier-operation").click( function () {
		showDialogForMagnifier(this.id);
	});
	$( ".datatable tbody tr" ).each(function(){
		$(this).click( function () { 
			$( ".datatable .select" ).removeClass("select");
			$(this).addClass("select"); 
		});
		$(this).hover(
			function () {
				$(this).addClass("hover");
			},
			function () {
				$(this).removeClass("hover");
			}
		);
	});
}
</script>
<form action="/order/transport" method="post" style="margin:0px">
<div style=" border:1px solid #DDDDDD; padding:2px; margin:2px;">
<label for="starttime">订单时间：</label><input type="text" id="starttime" name="starttime" />
<label for="endtime">--</label><input type="text" id="endtime" name="endtime" />
<label for="commodity">商品：</label><input type="text" id="productName" name="productName" />
<label for="member">用户：</label><input type="text" id="username" name="username" />
<label for="state">状态：</label>
<select id="state" name="state">
  <option value="">全部</option>
  <option value="0">待处理</option>
  <option value="1">已处理</option>
</select>
<input type="submit" id="queryButton" value="查询"/>
</div>
</form>
<style>
	.datatable {
		text-align: left;
		font-size: 12px;
		font-family: verdana;
		background: #c0c0c0; margin:2px;
	}

	.datatable thead tr,

	.datatable tfoot tr {
		background: #c0c0c0;
	}

	.datatable tbody tr {
		background: #f0f0f0;
	}

	.datatable td, th {
		border: 1px solid white; height:28px;
	}
	.datatable td {background-color:white;}
	
	.datatable .hover td {background-color:#99CCFF;}
	
	.datatable .select td {background-color:#EEEE99;}

	#ui-datepicker-div{ font-size:12px;}
</style>
<div style="padding:2px; margin:2px;">
<table cellspacing="1" width="100%" class="datatable" id="waybill-table">
	<thead>
		<tr>
            <th></th>
			<th>ID</th>
			<th>用户</th>
			<th>运单号</th>
			<th>国家/城市</th>
			<th>姓名/电话/邮编</th>
			<th>运费</th>
			<th>服务费</th>
            <th>报关费</th>
            <th>总费用</th>
            <th>最后更新时间</th>
			<th>状态</th>
            <th>操作</th>
		</tr>
	</thead>
    <tfoot>
      <tr><td colspan="14"><button id="del-button">删除选中</button></td></tr>
    </tfoot>
	<tbody>
	</tbody>
</table>
</div>
<form action="/order/transport-pager" method="post">
<input type="hidden" id="starttime2" name="starttime2" value="" />
<input type="hidden" id="endtime2" name="endtime2" value="" />
<input type="hidden" id="productName2" name="productName2" value="" />
<input type="hidden" id="username2" name="username2" value="" />
<input type="hidden" id="state2" name="state2" value="" />
</form>
<div id="pager" class="pager"></div>
<style type="text/css">
#dialog-modal { display:none; }
#dialog-modal input { width:170px;}
</style>
<script type="text/javascript">
$(function(){
	$( "#dialog:ui-dialog" ).dialog( "destroy" );
	$( "#dialog-modal" ).dialog({
		height: 300,
		width: 800,
		modal: true,
		autoOpen: false
	});
    $( "#edit-button-ok").button().click( function () {
		id = $("#record-id").val();productName_value = $("#product-name").val();shipType_value = $("#shipType").val();
		logistics_value = $("#logistics").val();weight_value = $("#weight").val();bagWeight_value = $("#bagWeight").val();
		discountFee_value = $("#discountFee").val();shipFee_value = $("#shipFee").val();serviceFee_value = $("#serviceFee").val();
		shipMoney_value = $("#shipMoney").val();status_value = $("#status").val();consignee_value = $("#consignee").val();
		conTel_value = $("#conTel").val();conPostCode_value = $("#conPostCode").val();conAdd_value = $("#conAdd").val();
		$.ajax({
			type: "POST",
			url: "/order/transport-edit",
			dataType: "json",
			data:"id="+id+"&productName="+productName_value+"&shipType="+shipType_value+"&logistics="+logistics_value+"&weight="+weight_value+"&bagWeight="+bagWeight_value+"&discountFee="+discountFee_value+"&shipFee="+shipFee_value+"&serviceFee="+serviceFee_value+"&shipMoney="+shipMoney_value+"&status="+status_value+"&consignee="+consignee_value+"&conTel="+conTel_value+"&conPostCode="+conPostCode_value+"&conAdd="+conAdd_value,
			success: function(data) {
				var result=eval(data);
				if (result == true) {
					alert( "更新成功！" );
					row = $( ".datatable .select" ).children();
					//$(row).eq(3).text(productName);
					//$(row).eq(4).text(state);
					$(row).eq(5).text(consignee_value + "/" + conTel_value + "/" + conPostCode_value);
					$(row).eq(6).text(shipFee_value);
					$(row).eq(7).text(serviceFee_value);
					$(row).eq(8).text(discountFee_value);
					$(row).eq(9).text(shipMoney_value);
					//$(row).eq(10).text(orderNo_value);
					$(row).eq(11).text(status_value);
					$( "#dialog-modal" ).dialog( "close" );
				} else {
					alert( "更新失败！" );
				}
			}
		});
	});
	$( "#edit-button-cancel").button().click( function () {
		$( "#dialog-modal" ).dialog( "close" );
	});

});
function showDialog(id) {
	$.ajax({
		type: "POST",
		url: "/order/transport-details",
		dataType: "json",
		data:"id="+id,
		success: function(data) {
			var object=eval(data);
			if (object != false) {
			    $("#record-id").val( object.id );
				//$("#product-name").val( object.productName );
				$("#shipType").val( object.shipType );
				$("#logistics").val( object.logistics );
				$("#weight").val( object.weight );
				$("#bagWeight").val( object.bagWeight );
				$("#discountFee").val( object.discountFee );
				$("#shipFee").val( object.shipFee );
				$("#serviceFee").val( object.serviceFee );
				$("#shipMoney").val( object.shipMoney );
				$("#status").val( object.status );
				$("#consignee").val( object.consignee );
				$("#conTel").val( object.conTel );
				$("#conPostCode").val( object.conPostCode );
				$("#conAdd").val( object.conAdd );
				$( "#dialog-modal" ).dialog( "open" );
			} else {
				alert( "获取数据失败！" );
			}
		}
	});
}

</script>
<div id="dialog-modal" title="操作">
	<table width="100%">
      <tr>
        <td align="right" width="100">名称：</td><td colspan="5"><input id="product-name" type="text" value="" style="width:99%;" /></td>		
      </tr>
      <tr>
        <td align="right" width="100">运送方式：</td><td><input id="shipType" type="text" value=""/></td>	
        <td align="right" width="100">物流单号：</td><td colspan="3"><input id="logistics" type="text" value="" style="width:99%;"/></td>
      </tr>
      <tr>        
        <td align="right">国家/城市：</td><td><input id="" type="text" value="" /></td>
		<td width="100" align="right">重量：</td><td><input id="weight" type="text" value="" /></td>
		<td width="100" align="right">包裹重量：</td><td><input id="bagWeight" type="text" value="" /></td>
     </tr>
     <tr>
        <td align="right">报关费：</td><td><input id="discountFee" type="text" value="" /></td>
		<td align="right">邮费：</td><td><input id="shipFee" type="text" value="" /></td>
		<td align="right">服务费：</td><td><input id="serviceFee" type="text" value="" /></td>
     </tr>
     <tr>
        <td align="right">总费用：</td><td><input id="shipMoney" type="text" value="" /></td>
		<td align="right">状态：</td><td><input id="status" type="text" value="" /></td>
		<td align="right">姓名：</td><td><input id="consignee" type="text" value="" /></td>
     </tr>
     <tr>
        <td align="right">邮箱：</td><td><input id="" type="text" value="" /></td>
		<td align="right">电话：</td><td><input id="conTel" type="text" value="" /></td>
		<td align="right">邮编：</td><td><input id="conPostCode" type="text" value="" /></td>
     </tr>
     <tr>
        <td align="right" width="100">收货地址：</td><td colspan="5"><input id="conAdd" type="text" value="" style="width:99%;" /></td>		
     </tr>
     <tr>
       <td colspan="6" align="center">
       <button id="edit-button-ok">确认更新</button>
       <button id="edit-button-cancel">取消返回</button><input type="hidden" id="record-id" value="" />
       </td>
     </tr>
    </table>
</div>
<style>
	.subdatatable {
		text-align: left;
		font-size: 12px;
		font-family: verdana;
		background: #c0c0c0; margin:2px;
	}

	.subdatatable thead tr,

	.subdatatable tfoot tr {
		background: #c0c0c0;
	}

	.subdatatable tbody tr {
		background: #f0f0f0;
	}

	.subdatatable td, .subdatatable th { 
		border: 1px solid white; height:18px;
	}
	.subdatatable td {background-color:white;}
	
	.subdatatable .hover td {background-color:#99CCFF;}
	
	.subdatatable .select td {background-color:#EEEE99;}
</style>
<script type="text/javascript">
$(function(){
	$( "#dialog-modal-magnifier" ).dialog({
		height: 350,
		width: 800,
		modal: true,
		autoOpen: false
	});
	$( "#add-button-magnifier").button().click( function () {
		logisticsNo_value = $( "#logisticsNo" ).val();opDate_value = $( "#opDate" ).val();
		opState_value = $( "#opState" ).val();opRemark_value = $( "#opRemark" ).val();
		$.ajax({
			type: "POST",
			url: "/order/transport-add-log",
			data:"logisticsNo="+logisticsNo_value+"&opDate="+opDate_value+"&opState="+opState_value+"&opRemark="+opRemark_value,
			success: function(data) {
				if (parseInt(data) > 0) {
					$(".subdatatable tbody").append("<tr><td>"+data+"</td><td>"+opDate_value+"</td><td>"+opState_value+"</td><td>"+opRemark_value+"</td><td>"+$( "#opUser" ).val()+"</td></tr>");
					$( ".subdatatable tbody tr" ).each(function(){
				        $(this).click( function () { 
							row = $( this ).children();
							$( "#log-id" ).val($(row).eq(0).text());
							$( "#opDate" ).val($(row).eq(1).text());
							$( "#opState" ).val($(row).eq(2).text());
							$( "#opRemark" ).val($(row).eq(3).text());
							$( "#opUser" ).val($(row).eq(4).text());
							$( ".subdatatable .select" ).removeClass("select");
							$(this).addClass("select"); 
						});
						$(this).hover(
							function () {
								$(this).addClass("hover");
							},
							function () {
								$(this).removeClass("hover");
							}
						);
					});
					alert("添加成功！");
				} else {
					alert("添加失败！");
				}
			}
		});
	});
	$( "#save-button-magnifier").button().click( function () {
		id = $( "#log-id" ).val();opDate_value = $( "#opDate" ).val();
		opState_value = $( "#opState" ).val();opRemark_value = $( "#opRemark" ).val();
		$.ajax({
			type: "POST",
			url: "/order/transport-edit-log",
			data:"id="+id+"&opDate="+opDate_value+"&opState="+opState_value+"&opRemark="+opRemark_value,
			success: function(data) {
				if (parseInt(data) > 0) {
					$( ".subdatatable tbody tr" ).each(function(){
						  row = $( this ).children();
						  if ($(row).eq(0).text() == $( "#log-id" ).val()) {
							  $(row).eq(1).text($( "#opDate" ).val());
							  $(row).eq(2).text($( "#opState" ).val());
							  $(row).eq(3).text($( "#opRemark" ).val());
							  $(row).eq(4).text($( "#opUser" ).val());
						  }
					});
					alert("修改成功！");
				} else {
					alert("修改失败！");
				}
			}
		});
	});
	$( "#button-cancel-magnifier").button().click( function () {
		$( "#dialog-modal-magnifier" ).dialog( "close" );
	});
});
function showDialogForMagnifier(id) {
	$( "#logisticsNo" ).val(id);
	$( "#log-id" ).val( "" );
	$( "#opDate" ).val( "" );
	$( "#opState" ).val( "" );
	$( "#opRemark" ).val( "" );
	$( "#opUser" ).val( "" );
	$.ajax({
		type: "POST",
		url: "/order/transport-log",
		dataType: "json",
		data:"id="+id,
		success: function(data) {
			var items=eval(data);
			$(".subdatatable tbody").empty();
			$.each(items, function(k)
			{
				$(".subdatatable tbody").append("<tr><td>"+items[k]['id']+"</td><td>"+items[k]['opDate']+"</td><td>"+items[k]['opState']+"</td><td>"+items[k]['opRemark']+"</td><td>"+items[k]['username']+"</td></tr>");
			});
			$( ".subdatatable tbody tr" ).each(function(){
				$(this).click( function () { 
					row = $( this ).children();
					$( "#log-id" ).val($(row).eq(0).text());
					$( "#opDate" ).val($(row).eq(1).text());
					$( "#opState" ).val($(row).eq(2).text());
					$( "#opRemark" ).val($(row).eq(3).text());
					$( "#opUser" ).val($(row).eq(4).text());
					$( ".subdatatable .select" ).removeClass("select");
					$(this).addClass("select"); 
				});
				$(this).hover(
					function () {
						$(this).addClass("hover");
					},
					function () {
						$(this).removeClass("hover");
					}
				);
			});
			$( "#dialog-modal-magnifier" ).dialog( "open" );
		}
	});
}
</script>
<div id="dialog-modal-magnifier" title="发货物流">
    <table width="100%">
      <tr>
        <td align="left" width="80">物流单号：</td><td><input id="logisticsNo" type="text" value="" readonly="readonly" style="width:99%;" /></td>
      </tr>
    </table>
    <br />
    <div style=" height:100px; width:99%; overflow-y:scroll;overflow-x:hidden; border:1px solid #666;">
    <table cellspacing="1" width="99%" class="subdatatable">
        <thead>
            <tr>
                <th>序号</th>
                <th>操作时间</th>
                <th>操作状态</th>
                <th>操作描述</th>
                <th>操作用户</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td>avc</td><td>avc</td><td>avc</td><td>avc</td><td>avc</td>
          </tr>
         
        </tbody>
    </table>
    </div>
    <br />
	<table width="100%">
     <tr>
        <td align="right">操作状态：</td><td><input id="opState" type="text" value="" /></td>
		<td align="right">操作描述：</td><td><input id="opRemark" type="text" value="" style="width:99%;" /></td>
     </tr>
     <tr>
        <td align="right">操作者：</td><td><input id="opUser" type="text" value="" /></td>
		<td align="right">操作时间：</td>
        <td>
          <input id="opDate" type="text" value="" />&nbsp;
          <button id="add-button-magnifier">添加</button>&nbsp;
          <button id="save-button-magnifier">保存</button><input id="log-id" type="hidden" value="" />
        </td>
     </tr>
     <tr>
       <td colspan="4" align="right">
       <br />
       <button id="button-cancel-magnifier">取消返回</button>
       </td>
     </tr>
    </table>
</div>